<template>
  <div>
    <my-header></my-header>
    <div class="info">
      <el-form :model="news" status-icon inline label-width="100px">
        <el-form-item label="用户" prop="username">
          <el-input v-model="news.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="news.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="news.content" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="点赞" prop="thumb">
        <el-input v-model="news.thumb" autocomplete="off"></el-input>
      </el-form-item> -->
        <el-form-item label="图片" prop="picture">
          <el-input v-model="news.picture" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addNews">发布</el-button>
          <el-button type="primary" @click="goBack">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<script>
import { reqAddNews } from "@/api/index";
import MyHeader from "@/components/MyHeader.vue";

export default {
  components: { MyHeader },
  name: "UserInfo",
  methods: {
    addNews() {
      reqAddNews(this.news).then((res) => {
        if (res.code == 200) {
          alert("添加新闻信息成功");
          this.$router.back();
        } else {
          alert(res.msg);
        }
      });
    },
    goBack() {
      this.$router.back();
    },
  },
  data() {
    return {
      news: {
        username: "用户",
        title: "标题",
        content: "content",
        picture: "picture",
      },
    };
  },
};
</script>

<style scoped>
.info {
  margin-top: 100px;
  margin-bottom: 00px;
  margin-left: 340px;
  /* margin: 20%;  */
  /* height: 600px; */
  width: 700px;
  text-align: center;
}
.el-input {
  width: 220px;
}
</style>